<!-- 中间的内容 -->
<template>
  <div class='w100 h100 pt10 pd fdsxzcrxew display-flex czbj'>
    <div class=" flex-1">
      <div class="title-label ">表单内容</div>
      <n-form ref="formRef" class="w100 h100 " label-placement="left" label-width="120px"
        require-mark-placement="right-hanging" size="medium">

        <n-row gutter="12" class="w100 h100">
          <draggable class="dragArea list-group" v-model="store.state.ddmJsonData" group="people" @change="changeFuna">

            <template #item="{ element, index }">

              <n-col :span="element.span" @click="sertxdf(element)" class="sz pr">
                <i class=" iconfont dx-guanbi dsfsdccxferw" @click="delksd(index)"></i>
                <n-form-item span="12" :label="element.title" :path="element.key" v-if="element.type == 'input'">
                  <div class=" display-flex">
                    <div class=" flex-1 ">
                      <n-input :placeholder="'请输入' + element.title" class="jjxsdfsd" />
                    </div>
                    <span class="ml5 vertical-center z9 fz12" v-if="element.dw">{{ element.dw }}</span>
                  </div>
                </n-form-item>
                <n-form-item :label="element.title" :path="element.key" v-if="element.type == 'textarea'">
                  <n-input :placeholder="'请输入' + element.title" type="textarea" rows="5" class="jjxsdfsd" />
                </n-form-item>
                <n-form-item :label="element.title" :path="element.key" v-if="element.type == 'number'">
                  <n-input-number :placeholder="'请输入' + element.title" size="medium" class="jjxsdfsd" />
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'fwb'">
                  <p class="ls mt5 sz">
                    <i class=" iconfont dx-wenbenbianji"></i> 点击编辑{{ element.title }}
                  </p>
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'img' || element.type == 'imglist'">
                  <div class="headPortrait-box vertical-center sz">
                    <i class="iconfont dx-tupian fz30"> </i>
                  </div>
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'pdf'">
                  <div class="headPortrait-box vertical-center sz">
                    <img src="../../../../assets/img/pdf.png" class="dsfsdrtryr cz">
                  </div>
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'video'">
                  <div class="display-flex">
                    <div class="flex-1">
                      <n-input placeholder="请选择/填写视频地址" />
                    </div>
                    <div class="ml10">
                      <n-button type="primary" size="medium">选择视频</n-button>
                    </div>
                  </div>
                </n-form-item>

                <n-form-item :label="element.title" v-if="element.type == 'select'">
                  <n-select />
                </n-form-item>

                <n-form-item :label="element.title" v-if="element.type == 'date'">

                  <n-date-picker type="date" clearable value-format="yyyy-MM-dd" />
                </n-form-item>

                <n-form-item :label="element.title" v-if="element.type == 'datetime'">
                  <n-date-picker type="datetime" clearable />
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'radio'">
                  <n-radio-group name="radiogroup" class="jjhnxetrwre">
                    <n-space>
                      <n-radio v-for="song in element.opt" :key="song.value" :value="song.value">
                        {{ song.label }}
                      </n-radio>
                    </n-space>
                  </n-radio-group>
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'Tags'">
                  <n-dynamic-tags />
                </n-form-item>
                <n-form-item :label="element.title" v-if="element.type == 'mapdz'">
                  <p class="ls mt5 sz">
                    <i class=" iconfont dx-map1"></i> 点击选择{{ element.title }}
                  </p>
                </n-form-item>
              </n-col>
            </template>
          </draggable>
        </n-row>
      </n-form>
    </div>
    <div class="pt10  pm20">
      <n-button type="primary" size="medium" @click="showModal = true">生成代码</n-button>

    </div>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>保存数据</div>
      </template>
      <div>
        <div class="mt10 display-flex">
          <div class="fz12 z3 vertical-center fddsferew tr">
            页面名称：
          </div>
          <div class=" flex-1 ">
            <n-input type="text" v-model:value="fromds.name" placeholder="" size="medium" clearable @change=""></n-input>
          </div>
        </div>
        <div class="mt10 display-flex">
          <div class="fz12 z3 vertical-center fddsferew tr">
            api接口名称：
          </div>
          <div class=" flex-1 ">
            <n-input type="text" placeholder="" v-model:value="fromds.apiurl" size="medium" clearable
              @change=""></n-input>
          </div>
        </div>
        <div class="mt10 display-flex">
          <div class="fz12 z3 vertical-center fddsferew tr">
            路由名称：
          </div>
          <div class=" flex-1 ">
            <n-input type="text" placeholder="" v-model:value="fromds.lyname" size="medium" clearable
              @change=""></n-input>
          </div>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button type="primary" size="medium" @click="scdm">生成代码</n-button>

          <n-button class="ml20" @click="showModal = false"> 取消 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import draggable from "vuedraggable";
import { NDynamicTags } from "naive-ui";
import store from "../../../../store";
import { callBack, dxpost,dxget,qurl } from "../../../../util/index";
const cz = qurl()
const showModal = ref(false)
const fromds = ref({
  name: "",
  apiurl: "",
  lyname: "",
  jsondata: ""
})

const sertxdf = (data) => {
  console.log(data);
  store.state.ddmdqobj = data
}
const scdm = async () => {
  fromds.value.jsondata = JSON.stringify(store.state.ddmJsonData)
  if (!fromds.value.name) {

    window.$message.error("请输入页面名称")
    return
  }
  if (!fromds.value.apiurl) {

    window.$message.error("请输入api路径")
    return
  }
  if (!fromds.value.lyname) {

    window.$message.error("请输入路由名称")
    return
  }
  await dxpost('dxgjAdmin/dxgjddm', fromds.value,cz.id?'put':'post')
  showModal.value = false
  callBack()
}
const delksd = (idx) => {
  store.state.ddmJsonData.splice(idx, 1)
}
const init = async()=>{
  const {data} = await dxget("dxgjAdmin/dxgjddm",{id:cz.id})
  fromds.value = data
  store.state.ddmJsonData = JSON.parse(data.jsondata)
  console.log(data.jsondata);
}
if(cz.id){
  init()
}
</script>
<style></style>
<style scoped>
.dragArea {
  height: 100%;
  width: 100%;
}

.dsfsdccxferw {
  position: absolute;
  right: -14px;
  top: 4px;
  color: red;
  z-index: 999;
}

.fddsferew {
  width: 150px;
  text-align: right;
}</style>